<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>项目评审意见 - 线上评测系统</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            background-color: #f5f7fa;
            color: #333;
        }

        /* 主要内容样式 */
        .main-content {
            padding: 20px;
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
        }

        .page-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 1px solid #e8e8e8;
        }

        .page-title {
            font-size: 20px;
            font-weight: 500;
            color: #333;
        }

        .btn-group {
            display: flex;
            gap: 10px;
        }

        .btn {
            padding: 8px 16px;
            border-radius: 4px;
            font-size: 14px;
            cursor: pointer;
            border: none;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .btn-primary {
            background-color: #1890ff;
            color: #fff;
        }

        .btn-primary:hover {
            background-color: #40a9ff;
        }

        .btn-default {
            background-color: #f5f5f5;
            color: #333;
            border: 1px solid #d9d9d9;
        }

        .btn-default:hover {
            background-color: #e8e8e8;
        }

        /* 项目信息样式 */
        .project-info-container {
            background-color: #fff;
            border-radius: 4px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            padding: 20px;
            margin-bottom: 20px;
        }

        .form-table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
            table-layout: fixed;
        }

        .form-table th,
        .form-table td {
            border: 1px solid #e8e8e8;
            padding: 12px 15px;
            text-align: left;
            vertical-align: top;
        }

        .form-table th {
            width: 20%;
            background-color: #f9f9f9;
            font-weight: normal;
            color: #333;
        }

        /* 评审意见容器 */
        .review-opinions-container {
            background-color: #fff;
            border-radius: 4px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            padding: 20px;
            margin-bottom: 20px;
        }

        .review-opinions-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 1px solid #e8e8e8;
        }

        .review-opinions-title {
            font-size: 16px;
            font-weight: 500;
            color: #333;
        }

        .download-all {
            color: #1890ff;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .reviewer-card {
            border: 1px solid #e8e8e8;
            border-radius: 4px;
            margin-bottom: 20px;
            overflow: hidden;
        }

        .reviewer-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 20px;
            background-color: #f9f9f9;
            border-bottom: 1px solid #e8e8e8;
        }

        .reviewer-info {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .reviewer-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: #f0f0f0;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #666;
            font-weight: 500;
        }

        .reviewer-name {
            font-weight: 500;
            color: #333;
        }

        .review-time {
            font-size: 14px;
            color: #999;
        }

        .review-status {
            display: inline-block;
            padding: 4px 8px;
            border-radius: 12px;
            font-size: 12px;
            margin-left: 10px;
        }

        .review-status.passed {
            background-color: #e6fff2;
            color: #52c41a;
        }

        .review-status.pending {
            background-color: #f9f9f9;
            color: #999;
        }

        .review-body {
            padding: 20px;
        }

        .review-comment {
            margin-bottom: 15px;
            color: #666;
            font-size: 14px;
            line-height: 1.6;
        }

        .supplementary-note {
            color: #ff4d4f;
            margin-bottom: 15px;
            padding: 10px;
            background-color: #fff1f0;
            border-radius: 4px;
        }

        .signature-section {
            display: flex;
            justify-content: flex-end;
            margin-top: 15px;
            padding-top: 15px;
            border-top: 1px dashed #e8e8e8;
        }

        .signature {
            font-size: 14px;
            color: #333;
        }

        .file-download {
            color: #1890ff;
            cursor: pointer;
            margin-left: 5px;
        }

        /* 关闭按钮 */
        .close-btn {
            display: block;
            width: 120px;
            margin: 20px auto;
            text-align: center;
        }

        /* 未评审人样式 */
        .not-reviewed {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            padding: 50px 0;
            color: #999;
        }

        .not-reviewed-icon {
            font-size: 60px;
            margin-bottom: 20px;
            color: #d9d9d9;
        }
    </style>
</head>

<body>
    <div class="main-content">
        <div class="page-header">
            <h1 class="page-title">审批意见表</h1>
            <div class="btn-group">
                <button class="btn btn-default" id="backBtn">
                    <i class="fas fa-arrow-left"></i> 返回
                </button>
                <button class="btn btn-default" id="printBtn">
                    <i class="fas fa-print"></i> 打印
                </button>
            </div>
        </div>

        <!-- 项目基本信息 -->
        <div class="project-info-container">
            <table class="form-table">
                <tr>
                    <th>项目名称</th>
                    <td id="projectName">医疗数据分析系统</td>
                    <th>项目编号</th>
                    <td id="projectId">GZ0304001</td>
                </tr>
                <tr>
                    <th>项目金额（万）</th>
                    <td id="projectAmount">126.00</td>
                    <th>项目负责人</th>
                    <td id="projectLeader">张三</td>
                </tr>
                <tr>
                    <th>客户</th>
                    <td id="projectClient">医院1院</td>
                    <th>备注说明</th>
                    <td id="projectRemark">-</td>
                </tr>
            </table>
        </div>

        <!-- 评审意见 -->
        <div class="review-opinions-container">
            <div class="review-opinions-header">
                <h2 class="review-opinions-title">评审意见</h2>
                <a href="#" class="download-all"><i class="fas fa-download"></i> 批量下载</a>
            </div>

            <!-- 评审人1 -->
            <div class="reviewer-card">
                <div class="reviewer-header">
                    <div class="reviewer-info">
                        <div class="reviewer-avatar">王</div>
                        <div>
                            <span class="reviewer-name">王均喜</span>
                            <span class="review-time">2023.3.31 16:37</span>
                            <span class="review-status passed">已通过</span>
                        </div>
                    </div>
                </div>
                <div class="review-body">
                    <div class="review-comment">需补充BIM方案材料</div>
                    <div class="signature-section">
                        <div class="signature">
                            <span>签名人：王均喜</span>
                            <a href="#" class="file-download"><i class="fas fa-download"></i></a>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 评审人2 -->
            <div class="reviewer-card">
                <div class="reviewer-header">
                    <div class="reviewer-info">
                        <div class="reviewer-avatar">程</div>
                        <div>
                            <span class="reviewer-name">程正华</span>
                            <span class="review-status pending">未评审</span>
                        </div>
                    </div>
                </div>
                <div class="review-body">
                    <div class="not-reviewed">
                        <i class="fas fa-inbox not-reviewed-icon"></i>
                        <p>未评审</p>
                    </div>
                </div>
            </div>

            <!-- 评审人3 -->
            <div class="reviewer-card">
                <div class="reviewer-header">
                    <div class="reviewer-info">
                        <div class="reviewer-avatar">陈</div>
                        <div>
                            <span class="reviewer-name">陈家洛</span>
                            <span class="review-time">2023.3.31 16:37</span>
                            <span class="review-status passed">已通过</span>
                        </div>
                    </div>
                </div>
                <div class="review-body">
                    <div class="review-comment">需补充BIM方案材料</div>
                    <div class="signature-section">
                        <div class="signature">
                            <span>签名人：陈家洛</span>
                            <a href="#" class="file-download"><i class="fas fa-download"></i></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 关闭按钮 -->
        <button class="btn btn-primary close-btn">关闭</button>
    </div>

    <script>
        // 从URL获取参数
        function getURLParameters() {
            const params = new URLSearchParams(window.location.search);
            const parameters = {};
            
            for(const [key, value] of params) {
                parameters[key] = value;
            }
            
            return parameters;
        }
        
        // 页面加载时填充数据
        document.addEventListener('DOMContentLoaded', function() {
            const params = getURLParameters();
            
            // 填充项目信息
            if(params.name) document.getElementById('projectName').textContent = params.name;
            if(params.id) document.getElementById('projectId').textContent = params.id;
            if(params.amount) document.getElementById('projectAmount').textContent = params.amount;
            if(params.leader) document.getElementById('projectLeader').textContent = params.leader;
            if(params.client) document.getElementById('projectClient').textContent = params.client;
            if(params.remark) document.getElementById('projectRemark').textContent = params.remark;
        });
        
        // 返回按钮事件
        document.getElementById('backBtn').addEventListener('click', function() {
            window.history.back();
        });
        
        // 关闭按钮事件
        document.querySelector('.close-btn').addEventListener('click', function() {
            window.history.back();
        });
        
        // 打印按钮事件
        document.getElementById('printBtn').addEventListener('click', function() {
            window.print();
        });
    </script>
</body>
</html>
